<template>
	<div style="height: 100%;">

		<div style="padding: 10px;margin-bottom: 10px;display: flex;justify-content: space-between;">
			<div style="flex: 4;">
				<div class="displayFlex">
					<div
						style="background: #fff;padding: 20px 10px;border-radius: 8px;flex: 1;margin-right: 10px;position: relative;">
						<div style="height: 50px;color: #000;font-weight: bold;" class="font16">计划任务</div>
						<div class="mb30">
							<div style="color: #888;" class="font13">计划(个)</div>
							<div style="color: #333;" class="font23">{{headerTotal.totalPlanNum}}</div>
						</div>
						<div>
							<div style="color: #888;" class="font13">任务(个)</div>
							<div style="color: #333;" class="font23">{{headerTotal.totalScheduleNum}}</div>
						</div>
						<img src="@/assets/sIcon63.png"
							style="width: 50px;height: 40px;position: absolute;bottom: 0;right: 0;" />
					</div>

					<div
						style="background: #fff;padding: 20px 10px;border-radius: 8px;flex: 1;margin-right: 10px;position: relative;">
						<div style="height: 50px;">
							<div style="color: #000;font-weight: bold;" class="font16">常规计划</div>
							<div style="color: #888;" class="font10">排污许可基础管理</div>
						</div>
						<div class="mb30">
							<div style="color: #888;" class="font13">计划(个)</div>
							<div style="color: #333;" class="font23">{{headerTotal.normalPlanNum}}</div>
						</div>
						<div>
							<div style="color: #888;" class="font13">任务(个)</div>
							<div style="color: #333;" class="font23">{{headerTotal.normalScheduleNum}}</div>
						</div>
						<img src="@/assets/sIcon61.png"
							style="width: 50px;height: 50px;position: absolute;bottom: 0;right: 0;" />
					</div>

					<div
						style="background: #fff;padding: 20px 10px;border-radius: 8px;flex: 1;margin-right: 10px;position: relative;">
						<div style="height: 50px;">
							<div style="color: #000;font-weight: bold;" class="font16">额外计划</div>
							<div style="color: #888;" class="font10">自定义计划</div>
						</div>
						<div class="mb30">
							<div style="color: #888;" class="font13">计划(个)</div>
							<div style="color: #333;" class="font23">{{headerTotal.customPlanNum}}</div>
						</div>
						<div>
							<div style="color: #888;" class="font13">任务(个)</div>
							<div style="color: #333;" class="font23">{{headerTotal.customScheduleNum}}</div>
						</div>
						<img src="@/assets/sIcon62.png"
							style="width: 50px;height: 50px;position: absolute;bottom: 0;right: 0;" />
					</div>

					<div
						style="background: #fff;padding: 20px 10px;border-radius: 8px;flex: 1;margin-right: 10px;position: relative;">
						<div style="height: 50px;">
							<div style="color: #000;font-weight: bold;" class="font16">临时任务</div>
							<div style="color: #888;" class="font10">预警、问题等</div>
						</div>
						<div class="mb30">
							<div style="color: #888;" class="font13">计划(个)</div>
							<div style="color: #333;" class="font23">{{headerTotal.tempPlanNum}}</div>
						</div>
						<div>
							<div style="color: #888;" class="font13">任务(个)</div>
							<div style="color: #333;" class="font23">{{headerTotal.tempScheduleNum}}</div>
						</div>
						<img src="@/assets/sIcon64.png"
							style="width: 45px;height: 40px;position: absolute;bottom: 0;right: 0;" />
					</div>
				</div>

			</div>

			<div class="displayFlex"
				style="background: #fff;padding:10px;border-radius: 8px;flex: 3;margin-right: 10px;position: relative;">
				<div id="chart1" style="width: 150px;height: 150px;"></div>

				<div v-if="heaaderRadios && heaaderRadios.length > 0" style="width: calc(100% - 160px);">
					<div class="displayFlexBet mb10">
						<div>
							<div class="displayFlex">
								<div style="width: 5px;height: 5px;border-radius: 50%;background: #4A30E0;" class="mr5">
								</div>
								<div style="color: #888;font-size: 12px;">{{heaaderRadios[1].name}}</div>
							</div>

							<div style="color: #333;font-size: 16px;" class="ml10">{{heaaderRadios[1].num}}</div>
						</div>

						<div>
							<div class="displayFlex">
								<div style="width: 5px;height: 5px;border-radius: 50%;background: #21D189;" class="mr5">
								</div>
								<div style="color: #888;font-size: 12px;width: 50px;">{{heaaderRadios[5].name}}</div>
							</div>

							<div style="color: #333;font-size: 16px;" class="ml10">{{heaaderRadios[5].num}}</div>
						</div>
					</div>

					<div class="displayFlexBet mb10">
						<div>
							<div class="displayFlex">
								<div style="width: 5px;height: 5px;border-radius: 50%;background: #E63118;" class="mr5">
								</div>
								<div style="color: #888;font-size: 12px;">{{heaaderRadios[2].name}}</div>
							</div>

							<div style="color: #333;font-size: 16px;" class="ml10">{{heaaderRadios[2].num}}</div>
						</div>

						<div>
							<div class="displayFlex">
								<div style="width: 5px;height: 5px;border-radius: 50%;background: #3A3EF4;" class="mr5">
								</div>
								<div style="color: #888;font-size: 12px;width: 50px;">工业固废</div>
							</div>

							<div style="color: #333;font-size: 16px;" class="ml10">{{heaaderRadios[3].num}}</div>
						</div>
					</div>

					<div class="displayFlexBet">
						<div>
							<div class="displayFlex">
								<div style="width: 5px;height: 5px;border-radius: 50%;background: #0078E8;" class="mr5">
								</div>
								<div style="color: #888;font-size: 12px;">{{heaaderRadios[4].name}}</div>
							</div>

							<div style="color: #333;font-size: 16px;" class="ml10">{{heaaderRadios[4].num}}</div>
						</div>

						<div>
							<div class="displayFlex">
								<div style="width: 5px;height: 5px;border-radius: 50%;background: #FFBA46;" class="mr5">
								</div>
								<div style="color: #888;font-size: 12px;width: 50px;">{{heaaderRadios[6].name}}</div>
							</div>

							<div style="color: #333;font-size: 16px;" class="ml10">{{heaaderRadios[6].num}}</div>
						</div>
					</div>

				</div>
			</div>

			<div
				style="background: #fff;padding:10px;border-radius: 8px;flex: 2;margin-right: 10px;position: relative;">

				<div>
					<el-button icon="el-icon-plus" @click="createSystemDocumentEntSchedule" type="primary" size="small"
						style="width: 100%;line-height: 18px;">年度环保管理计划</el-button>
				</div>

				<div class="mt15">
					<el-button icon="el-icon-plus" @click="visible1 = true,form = $options.data().form" type="primary"
						size="small"
						style="background: #fff !important;width: 100%;line-height: 18px;color: #3A3EF4 !important;">新增计划</el-button>
				</div>

				<div style="border-bottom: 1px solid#EDECF1;margin: 15px 0;"></div>

				<div>
					<el-select v-model="params.status" placeholder="状态" size="small" @change="reset()" clearable
						style="width: 100%;line-height: 18px;" multiple>
						<el-option label="未完善" value="NOT_CONSUMMATE" />
						<el-option label="未开始" value="NOT_START" />
						<el-option label="进行中" value="ONGOING" />
						<el-option label="已取消" value="CANCEL" />
						<el-option label="已暂停" value="PAUSE" />
						<el-option label="已完成" value="COMPLETE" />
					</el-select>
				</div>

				<div class="mt15">
					<el-date-picker v-model="params.year" placeholder="年度" format="yyyy" value-format="yyyy" type="year"
						size="small" style="width: 100%;line-height: 18px;" @change="reset()">
					</el-date-picker>
				</div>
			</div>
		</div>


		<div class="displayFlex" style="padding: 20px 10px;border-radius: 8px;background: #fff;margin-bottom: 10px;">
			<div v-for="(item,index) in heaaderRadios" :key="index" style="margin-right: 10px;"
				@click="changeRadio(item.name)" :class="[scheduleType == item.name?'selectedClass':'']" class="point">
				{{item.name}}（{{item.num}}）
			</div>
		</div>
		<div style="height: calc(100% - 172px);overflow-y: hidden;">
			<div class="displayFlex"
				style="background: #fff;padding: 10px 20px;border-radius: 16px;margin-bottom: 10px;font-size: 14px;color: #999;">
				<div style="flex: 2;">类别</div>
				<div style="flex: 1;">名称</div>

				<div style="flex: 1;">发布人</div>
				<div style="flex: 1;">执行人</div>
				<div style="flex: 1;">执行</div>
				<div style="flex: 1;">状态</div>
				<div style="flex: 1;">开始时间</div>
				<div style="flex: 1;">结束时间</div>
				<div style="flex: 1;text-align: center;">操作</div>
			</div>
			<el-scrollbar style="height: calc(100% - 40px);">
				<div v-for="(item,index) in data3" :key="index" class="point" @click="showDetail(item)"
					style="background: #fff;padding: 10px 20px;border-radius: 16px;margin-bottom: 10px;font-size: 14px;">
					<div class="displayFlex">
						<div style="flex: 2;">
							<span>{{item.contentCodeStr}}</span>
							<span style="color: #999;font-size: 10px;">({{item.scheduleTypeStr}})</span>
						</div>
						<div style="flex: 1;">{{item.planName}}</div>
						<!-- <div style="flex: 1;">
							<span v-for="(item1,index1) in item.gasOutletList" :key="index1">{{item1.outletName}}</span>
						</div> -->
						<div style="flex: 1;">{{item.publishUserName}}</div>

						<div style="flex: 1;">{{item.planExecuteUserName}}</div>
						<div style="flex: 1;">{{item.completeScheduleNum}}/{{item.totalScheduleNum}}</div>


						<div style="flex: 1;">
							<el-tag
								v-if="item.status == 'NOT_START' || item.status == 'ONGOING' || item.status == 'NOT_CONSUMMATE' || item.status == 'CANCEL'"
								type="warning">{{item.statusStr}}</el-tag>
							<el-tag v-else-if="item.status == 'COMPLETE'" type="success">{{item.statusStr}}</el-tag>
							<el-tag v-else type="primary">{{item.statusStr}}</el-tag>
						</div>

						<div style="flex: 1;">{{item.startTime.split(" ")[0]}}</div>
						<div style="flex: 1;">{{item.endTime.split(" ")[0]}}</div>
						<div style="flex: 1;display: flex;align-items: center;justify-content: center;">
							<img src="@/assets/sIcon68.png" style="cursor: pointer;width: 15px;height: 18px;"
								@click.stop="edit(item)" />

							<div v-if="item.status =='NOT_START' || item.status =='ONGOING'" type="text"
								style="color: #F56C6C;cursor: pointer;font-size: 20px;margin-left: 10px;"
								@click.stop="pausePlan(item)">
								<i class="el-icon-video-pause"></i>
							</div>

							<div v-if="item.status =='PAUSE'" type="text"
								style="color: #426ab3;cursor: pointer;font-size: 20px;margin-left: 5px;"
								@click.stop="restartPlan(item)">
								<i class="el-icon-video-play"></i>
							</div>
							<img v-if="item.status !='CANCEL'" src="@/assets/sIcon69.png"
								style="cursor: pointer;width: 15px;height: 18px;" class="ml10"
								@click.stop="cancelSpectPlan(item)">
							</img>

						</div>
					</div>

				</div>
			</el-scrollbar>
		</div>

		<div v-show="data3&&data3.length>0" align="right" style="margin-top: 10px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="pageIndex" :page-sizes="[10,20,30,50]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-dialog title="新增计划" :visible.sync="visible1" width="40%" top="2%" append-to-body	 :modal="false">
			<el-form ref="form" :model="form" label-width="80px" :rules="rules">
				<el-form-item label="类别" prop="scheduleType">
					<el-select v-model="form.scheduleType" placeholder="请选择类别"
						@change="getDocumentScheduleContentCodeList" style="width: 100%;">
						<el-option v-for="item in dataList1" :label="item.name" :value="item.code">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="内容" prop="contentCode" v-if="form.scheduleType">
					<el-select v-model="form.contentCode" placeholder="请选择内容" style="width: 100%;">
						<el-option v-for="item in dataList2" :label="item.name" :value="item.code">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="计划名称" prop="planName">
					<el-input v-model="form.planName" placeholder="计划名称" style="width: 100%;"></el-input>
				</el-form-item>
				<el-form-item label="执行人" prop="planExecuteBy">
					<el-select v-model="form.planExecuteBy" placeholder="请选择执行人" style="width: 100%;">
						<el-option v-for="item in dataList3" :label="item.userName" :value="item.userId">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="频率" prop="frequency" required>
					<el-select v-model="form.frequency" placeholder="请选择频率" style="width: 100%;"
						@change="changeFrequency">
						<el-option label="仅一次" value="ONCE" />
						<el-option label="每天一次" value="ONCE_DAY" />
						<el-option label="每天多次" value="REPEATEDLY_DAY" />
						<el-option label="每周" value="ONCE_WEEK" />
						<el-option label="每月" value="ONCE_MONTH" />
						<el-option label="每年" value="ONCE_YEAR" />
					</el-select>
				</el-form-item>

				<div
					v-if="form.frequency == 'ONCE' || form.frequency == 'ONCE_DAY' || form.frequency == 'REPEATEDLY_DAY'">
					<div v-for="(item,index) in form.detailList" :key="index">
						<el-form-item label="任务时间" style="width: 100%;">
							<div class="displayFlexBet">
								<!-- <el-select v-if="form.frequency == 'ONCE_MONTH'" v-model="form.frequencyDateNum" placeholder="请选择"
									style="margin-right: 5px;flex: 1;">
									<el-option :label="item+'号'" v-for="(item,index) in timeNumList" :value="item" :key="index" />
								</el-select> -->
								<!-- -->
								<el-time-picker v-model="item.scheduleDateTime" placeholder="选择开始时间"
									style="flex: 1;margin-right: 10px;">
								</el-time-picker>
								<el-time-picker v-model="item.completeDateTime" placeholder="选择结束时间" style="flex: 1;">
								</el-time-picker>

								<div style="width:100px" v-if="form.frequency == 'REPEATEDLY_DAY'">
									<i class="el-icon-remove" style="margin-left: 10px;font-size: 20px;"
										@click="reduceDetailList(index)" />
									<i class="el-icon-circle-plus" style="margin-left: 10px;font-size: 20px;"
										@click="addDetailList" />
								</div>
							</div>
						</el-form-item>
					</div>
				</div>
				<div v-else-if="form.frequency == 'ONCE_MONTH'">
					<div v-for="(item,index) in form.detailList" :key="index">
						<el-form-item :label="'任务时间'+(index+1)" style="width: 100%;">
							<div>
								<div class="displayFlexBet mb10">
									<el-select v-model="item.scheduleDateNum" placeholder="请选择开始日期"
										style="margin-right: 5px;flex: 1;">
										<el-option :label="item+'号'" v-for="(item,index) in timeNumList" :value="item"
											:key="index" />
									</el-select>
									<el-time-picker v-model="item.scheduleDateTime" placeholder="选择开始时间"
										style="flex: 1;margin-right: 10px;">
									</el-time-picker>
									<div style="width:100px">
										<i class="el-icon-remove" style="margin-left: 10px;font-size: 20px;"
											@click="reduceDetailList(index)" />
										<i class="el-icon-circle-plus" style="margin-left: 10px;font-size: 20px;"
											@click="addDetailList" />
									</div>
								</div>
								<div class="displayFlexBet">
									<el-select v-model="item.completeDateNum" placeholder="请选择结束日期"
										style="margin-right: 5px;flex: 1;">
										<el-option :label="item+'号'" v-for="(item,index) in timeNumList" :value="item"
											:key="index" />
									</el-select>
									<el-time-picker v-model="item.completeDateTime" placeholder="选择结束时间"
										style="flex: 1;">
									</el-time-picker>
									<div style="width: 100px;margin-left: 10px;"></div>
								</div>
							</div>
						</el-form-item>
					</div>
				</div>
				<div v-else-if="form.frequency == 'ONCE_YEAR'">
					<div v-for="(item,index) in form.detailList" :key="index">
						<el-form-item :label="'任务时间'+(index+1)" style="width: 100%;">
							<div style="width: 100%;">
								<div class="displayFlexBet mb10">
									<el-select v-model="item.scheduleMonthNum" placeholder="开始月份"
										style="margin-right: 5px;flex: 1;">
										<el-option :label="item+'月份'" v-for="(item,index) in monthNumList" :value="item"
											:key="index" />
									</el-select>
									<el-select v-model="item.scheduleDateNum" placeholder="开始日期"
										style="margin-right: 5px;flex: 1;">
										<el-option :label="item+'号'" v-for="(item,index) in timeNumList" :value="item"
											:key="index" />
									</el-select>
									<el-time-picker v-model="item.scheduleDateTime" placeholder="开始时间"
										style="flex: 1;margin-right: 10px;">
									</el-time-picker>
									<div style="width:100px">
										<i class="el-icon-remove" style="margin-left: 10px;font-size: 20px;"
											@click="reduceDetailList(index)" />
										<i class="el-icon-circle-plus" style="margin-left: 10px;font-size: 20px;"
											@click="addDetailList" />
									</div>
								</div>
								<div class="displayFlexBet">
									<el-select v-model="item.completeMonthNum" placeholder="结束月份"
										style="margin-right: 5px;flex: 1;">
										<el-option :label="item+'月份'" v-for="(item,index) in monthNumList" :value="item"
											:key="index" />
									</el-select>
									<el-select v-model="item.completeDateNum" placeholder="结束日期"
										style="margin-right: 5px;flex: 1;">
										<el-option :label="item+'号'" v-for="(item,index) in timeNumList" :value="item"
											:key="index" />
									</el-select>
									<el-time-picker v-model="item.completeDateTime" placeholder="结束时间" style="flex: 1;">
									</el-time-picker>
									<div style="width: 100px;margin-left: 10px;"></div>
								</div>
							</div>
						</el-form-item>
					</div>
				</div>
				<div v-else-if="form.frequency == 'ONCE_WEEK'">
					<div v-for="(item,index) in form.detailList" :key="index">
						<el-form-item :label="'任务时间'+(index+1)" style="width: 100%;">
							<div>
								<div class="displayFlexBet mb10">
									<el-select v-model="item.scheduleDateNum" placeholder="请选择"
										style="margin-right: 5px;">
										<el-option :label="item.label" v-for="(item,index) in timeNumList"
											:value="item.value" :key="index" />
									</el-select>
									<el-time-picker v-model="item.scheduleDateTime" placeholder="选择开始时间"
										style="flex: 1;margin-right: 10px;">
									</el-time-picker>
									<div style="width:100px">
										<i class="el-icon-remove" style="margin-left: 10px;font-size: 20px;"
											@click="reduceDetailList(index)" />
										<i class="el-icon-circle-plus" style="margin-left: 10px;font-size: 20px;"
											@click="addDetailList" />
									</div>
								</div>
								<div class="displayFlexBet">
									<el-select v-model="item.completeDateNum" placeholder="请选择"
										style="margin-right: 5px;">
										<el-option :label="item.label" v-for="(item,index) in timeNumList"
											:value="item.value" :key="index" />
									</el-select>
									<el-time-picker v-model="item.completeDateTime" placeholder="选择结束时间"
										style="flex: 1;">
									</el-time-picker>
									<div style="width: 100px;margin-left: 10px;"></div>
								</div>
							</div>
						</el-form-item>
					</div>
				</div>

				<el-form-item label="开始时间" prop="startTime">
					<el-date-picker class="short-input" v-model="form.startTime" type="date" format="yyyy-MM-dd"
						placeholder="开始时间" style="width: 100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="截止时间" prop="endTime" v-if="form.frequency != 'ONCE'">
					<el-date-picker class="short-input" v-model="form.endTime" type="date" format="yyyy-MM-dd"
						placeholder="截止时间" style="width: 100%;">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="节假日" prop="ignoreType">
					<el-select v-model="form.ignoreType" placeholder="请选择忽略节假日" style="width: 100%;">
						<el-option label="不忽略" :value="0" />
						<el-option label="忽略双休和节假日" :value="1" />
						<el-option label="忽略节假日" :value="2" />
						<el-option label="忽略双休" :value="3" />
					</el-select>
				</el-form-item>

				<el-form-item label="说明" prop="remark">
					<el-input v-model="form.remark" type="textarea" style="width: 100%;"></el-input>
				</el-form-item>


				<el-form-item label="巡检项" prop="gasOutletList" v-if="form.scheduleType == 'WASTE_GAS'"
					style="width: 100%;">
					<el-cascader v-model="form.gasOutletList" :options="gasOutletList" :props="{ 'multiple': true }"
						style="width: 100%;" collapse-tags filterable></el-cascader>
				</el-form-item>

				<el-form-item label="巡检项" prop="waterOutletList" v-if="form.scheduleType == 'WASTE_WATER'"
					style="width: 100%;">
					<el-cascader v-model="form.waterOutletList" :options="waterOutletList" :props="{ 'multiple': true }"
						style="width: 100%;" collapse-tags filterable></el-cascader>
				</el-form-item>
			</el-form>

			<div style="text-align: center;margin-top: 30px;" slot="footer">
				<el-button type="primary" @click="onSubmit">保存</el-button>
				<el-button @click="visible1 = false">取消</el-button>
			</div>
		</el-dialog>


		<el-dialog :visible.sync="visible2" width="80%" :close-on-click-modal="false" top="4%" title="计划详情" append-to-body	 :modal="false">
			<div style="padding: 0 10px;">
				<div class="mb10"
					v-if="detail.rewuDetail.contentCode == 'WATER_SELF_SURVEY' || detail.rewuDetail.contentCode == 'GAS_SELF_SURVEY'">
					<el-button type="primary" icon="el-icon-plus"
						@click="$refs.taskSave.open(selectItem.id,detail.rewuDetail)">新增任务</el-button>
				</div>

				<div class="displayFlexBet">
					<div style="padding: 10px;background: #ECF4FE;border-radius: 10px;flex: 3;">
						<div class="displayFlexBet" style="margin-bottom: 10px;">
							<div class="displayFlex">
								<span style="margin-right: 10px;font-size: 16px;font-weight: bold;"
									v-if="detail.rewuDetail.planName">{{detail.rewuDetail.planName}}
								</span>
								<span
									style="margin-right: 10px;font-size: 15px;font-weight: bold;">【{{detail.rewuDetail.scheduleTypeStr}}】</span>
							</div>
						</div>
						<div class="displayFlexBet" style="margin-bottom: 10px;">
							<div style="font-size: 15px;font-weight: bold;">
								{{detail.rewuDetail.publishUserName}}：{{detail.rewuDetail.remark}}
							</div>
						</div>
						<div class="displayFlexBet" style="margin-bottom: 10px;">
							<div v-if="detail.rewuDetail.startTime && detail.rewuDetail.endTime">
								时间：{{detail.rewuDetail.startTime.split(" ")[0]}}~{{detail.rewuDetail.endTime.split(" ")[0]}}
							</div>
							<div>
								频率：{{detail.rewuDetail.frequencyStr}}
							</div>
						</div>

						<div style="margin-bottom: 10px;">类别：{{detail.rewuDetail.scheduleTypeStr}}</div>
						<div style="margin-bottom: 10px;" v-if="detail.rewuDetail.executeByName">
							执行人：{{detail.rewuDetail.executeByName}}</div>
					</div>

					<el-progress style="margin-left: 20px;" type="circle" v-if="detail.rewuDetail.totalScheduleNum"
						:percentage="Number(((Number(detail.rewuDetail.completeScheduleNum/detail.rewuDetail.totalScheduleNum).toFixed(2))*100).toFixed(2))"></el-progress>
					<el-progress style="margin-left: 20px;" type="circle" v-else :percentage="0"></el-progress>
				</div>

				<div style="margin-top: 10px;">
					<el-table :data="detail.pageEntScheduleList" stripe style="width: 100%" size="mini" border>
						<el-table-column type="index" label="编号" width="50"></el-table-column>
						<el-table-column prop="content" label="任务" width="150"></el-table-column>
						<el-table-column prop="remark" label="说明">
							<template slot-scope="scope">
								<div class="textOver">{{scope.row.remark}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="planCompleteTime" label="计划结束时间" width="140"></el-table-column>
						<el-table-column prop="actualCompleteTime" label="实际完成时间" width="140"></el-table-column>
						<el-table-column prop="planExecuteByName" label="执行人" width="80"></el-table-column>
						<el-table-column prop="statusStr" label="状态" width="70">
							<template slot-scope="scope">
								<el-tag :type="scope.row.typeTag" size="mini"> {{scope.row.statusStr}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="approveUserNames" label="审核人" width="80"></el-table-column>

						<el-table-column prop="date" label="操作" width="90">
							<template slot-scope="scope">
								<el-button @click="getEntScheduleData(scope.row)" type="text"
									size="small">查看</el-button>
								<el-button v-if="scope.row.status !='CANCEL'" type="text" size="small"
									@click="cancelSchedule(scope.row)">取消</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>

		</el-dialog>

		<entScheduleDet ref="entScheduleDet"></entScheduleDet>
		<taskSave ref="taskSave" :type="detail.rewuDetail.scheduleType" @refresh="pageEntScheduleListByPlanId(selectItem)"></taskSave>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import entScheduleDet from "@/components/entSchedule/entScheduleDet"
	import taskSave from "./components/taskSave"
	let that

	export default {
		components: {
			entScheduleDet,
			taskSave
		},
		data() {
			return {
				params: {
					status: ['ONGOING'],
					scheduleType: '',
					year: ''
				},

				heaaderRadios: [],
				scheduleType: '',
				form: {
					scheduleType: '',
					ignoreType: 0,
					contentCode: '',
					planName: '',
					planExecuteBy: '',
					startTime: '',
					endTime: '',
					frequency: 'ONCE',
					gasOutletList: [],
					waterOutletList: [],
					gasOutletListDesc: '',
					waterOutletListDesc: '',
					detailList: [{
						scheduleDateNum: "", // 任务开始的星期几
						scheduleDateTime: "", // 任务开始时间
						completeDateTime: "", // 任务结束的星期几
						completeDateTime: "", // 任务截止时间
					}],
				},
				visible1: false,
				visible2: false,
				detail: {
					pageIndex: 1,
					pageSize: 20,
					total: 0,
					rewuDetail: {},
					pageEntScheduleList: [],
				},
				selectItem: '',
				dataList1: [],
				dataList2: [],
				data2: [],
				data3: [], //待审批
				gasOutletList: [],
				waterOutletList: [],
				dataList3: [],
				timeNumList: [],
				monthNumList: [],
				pageIndex: 1,
				pageSize: 20,
				total: 0,
				headerTotal: {},
				rules: {
					scheduleType: [{
						required: true,
						message: '请选择危险废物类别',
						trigger: 'change'
					}],
					contentCode: [{
						required: true,
						message: '请选择内容',
						trigger: 'change'
					}],
					planName: [{
						required: true,
						message: '请输入计划名称',
						trigger: 'blur'
					}],
					planExecuteBy: [{
						required: true,
						message: '请选择执行人',
						trigger: 'change'
					}],
					startTime: [{
						required: true,
						message: '开始时间',
						trigger: 'change'
					}],
					endTime: [{
						required: true,
						message: '截止时间',
						trigger: 'change'
					}],
					remark: [{
						required: true,
						message: '请填写说明',
						trigger: 'change'
					}],
				},

			}
		},

		mounted() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.ajax({
				url: '/documentEntSchedule/getDocumentScheduleTypeList',
				contentType: 'application/x-www-form-urlencoded',
				data: {},
				success: function(result) {
					that.dataList1 = result.data
				}
			})

			that.countPlanSchedule()
			that.getPlanExecutorList()
			that.getGasOutletList()
			that.getWaterOutletList()
			that.pageEntGroupDataReportList()
		},

		methods: {

			createSystemDocumentEntSchedule() {
				this.$confirm('是否生成年度计划?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/documentEntPlan/createSystemPlan?ticketId=' + that.params
							.ticketId,
						data: {},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.status && result.data) {
								that.$message({
									showClose: true,
									message: '生成成功',
									type: 'success'
								});

								that.countPlanSchedule()
								that.getPlanExecutorList()
								that.getGasOutletList()
								that.getWaterOutletList()
								that.pageEntGroupDataReportList()
							} else {
								that.$message({
									showClose: true,
									message: result.infoList[0],
									type: 'error'
								});
							}
						}
					})
				})
			},

			countPlanSchedule() {
				that.ajax({
					url: '/documentEntPlan/countPlanSchedule?ticketId=' + that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						that.headerTotal = result.data
					},
				})
			},

			getPlanExecutorList() {
				that.ajax({
					url: '/documentEntSchedule/getPlanExecutorList',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						year: that.params.year
					},
					success: function(result) {
						that.dataList3 = result.data
					}
				})
			},

			changeRadio(value) {
				that.scheduleType = value
				let scheduleTypeIndex = that.heaaderRadios.findIndex(item => item.name == that.scheduleType)
				that.params.scheduleType = that.heaaderRadios[scheduleTypeIndex].code
				that.pageIndex = 1
				that.pageEntGroupDataReportList()
			},

			pageEntGroupDataReportList() {
				that.ajax({
					url: '/documentEntPlan/countDocumentPlan?ticketId=' + that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						that.heaaderRadios = result.data
						that.scheduleType = that.scheduleType || that.heaaderRadios[0].name

						let chartData = []
						for (let item of result.data) {
							if (item.name != "全部") {
								item.value = item.num
								chartData.push(item)
							}
						}

						var chartDom = document.getElementById('chart1');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							tooltip: {
								trigger: 'item'
							},
							grid: {
								top: 0,
								right: 20,
								bottom: 10,
								left: 30,
							},

							series: [{
								type: 'pie',
								radius: ['40%', '70%'],
								avoidLabelOverlap: false,
								center: ['40%', '50%'],
								data: chartData,
								label: {
									show: false,
									position: 'center'
								},
								labelLine: {
									show: false
								},
								itemStyle: {
									normal: {
										color: function(colors) {
											var colorList = [
												'#3A3EF4',
												'#F04859',
												'#91cd77',
												'#0078E8',
												'#21D189',
												'#FFBA46'
											];
											return colorList[colors.dataIndex];
										}
									},
								},
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};

						option && myChart.setOption(option);
					},
				})

				that.getData()
			},

			getWaterOutletList(palnId) {
				let params = {}
				if (palnId) params.planId = palnId
				that.ajax({
					url: '/waterInspect/getWaterOutletList',
					contentType: 'application/x-www-form-urlencoded',
					data: params,
					success: function(result) {
						let selectedIdList = []
						for (let item of result.data) {
							if (item.detailList && item.detailList.length > 0) {
								for (let item1 of item.detailList) {
									if (item1.installationType == 'OUTLET') item1.disabled = true
									item1.label = item1.installationName
									item1.value = item1.installationId

									if (item1.isInspect) {
										let selectId = [item.outletId, item1.installationId]
										selectedIdList.push(selectId)
									}
								}
							}
							item.children = item.detailList
							item.label = item.outletName
							item.value = item.outletId
						}

						that.waterOutletList = result.data
						if (palnId) that.form.waterOutletList = selectedIdList
					}
				})
			},

			getGasOutletList(palnId) {
				let params = {}
				if (palnId) params.planId = palnId
				that.ajax({
					url: '/gasInspect/getGasOutletList',
					contentType: 'application/x-www-form-urlencoded',
					data: params,
					success: function(result) {
						let selectedIdList = []
						for (let item of result.data) {
							if (item.detailList && item.detailList.length > 0) {
								for (let item1 of item.detailList) {
									if (item1.installationType == 'OUTLET') item1.disabled = true
									item1.label = item1.installationName
									item1.value = item1.installationId

									if (item1.isInspect) {
										let selectId = [item.outletId, item1.installationId]
										selectedIdList.push(selectId)
									}
								}
							}
							item.children = item.detailList
							item.label = item.outletName
							item.value = item.outletId
						}

						that.gasOutletList = result.data
						if (palnId) that.form.gasOutletList = selectedIdList
					}
				})
			},

			restartPlan(item) {
				this.$confirm('是否启动此任务?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: 'documentEntPlan/restartPlan',
						data: {
							planId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: async (result) => {
							that.pageEntScheduleListByPlanId(item)
						}
					}, "加载中...");
				})
			},

			//暂停计划
			pausePlan(item) {
				this.$confirm('是否暂停此任务?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: 'documentEntPlan/pausePlan',
						data: {
							planId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: async (result) => {
							that.pageEntScheduleListByPlanId(item)
						}
					}, "加载中...");
				})
			},

			//取消任务
			cancelSchedule(item) {
				this.$confirm('是否取消此任务?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: 'documentEntSchedule/cancelSchedule',
						data: {
							scheduleId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: async (result) => {
							that.pageEntScheduleListByPlanId(item)
						}
					}, "加载中...");
				})
			},

			getEntScheduleData(item) {
				that.$refs.entScheduleDet.getData(item)
			},

			showDetail(item) {
				that.selectItem = item
				that.ajax({
					url: 'documentEntPlan/getDocumentEntPlanById',
					data: {
						planId: item.id
					},
					contentType: 'application/x-www-form-urlencoded',
					success: async (result) => {
						result.data.completeScheduleNum = result.data.completeScheduleNum || 0
						result.data.totalScheduleNum = result.data.totalScheduleNum || 0
						that.detail.rewuDetail = result.data
						that.visible2 = true
						that.pageEntScheduleListByPlanId(item)
					}
				}, "加载中...");
			},

			pageEntScheduleListByPlanId(item) {
				that.ajax({
					url: '/documentEntSchedule/pageEntScheduleListByPlanId?ticketId=' + this
						.$store.state.token +
						'&pageIndex=' + this.detail.pageIndex + '&pageSize=' + this.detail
						.pageSize,
					data: JSON.stringify({
						planId: item.id
					}),
					contentType: 'application/json',
					success: (result) => {
						if (result.status == 1) {
							that.detail.total = result.data.total
							for (let item of result.data.records) {
								if (item.status == 'WAIT_COMPLETE') {
									item.typeTag = "warning"
								} else if (item.status == 'OVER_TIME') {
									item.typeTag = "danger"
								} else if (item.status == 'HAVE_COMPLETE') {
									item.typeTag = "success"
								} else {
									item.typeTag = "primary"
								}
							}
							that.detail.pageEntScheduleList = result.data.records
							that.$forceUpdate()
						}
					}
				}, "加载中...");
			},

			//取消计划
			cancelSpectPlan(item) {
				this.$confirm('是否取消此计划?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: 'documentEntPlan/cancelPlan',
						data: {
							planId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: async (result) => {
							that.pageIndex = 1
							that.getData()
						}
					}, "加载中...");
				})
			},

			reduceDetailList(index) {
				if (that.form.detailList.length <= 1) return that.$message.error("至少保留一个")
				that.form.detailList.splice(index, 1)
			},

			addDetailList() {
				that.form.detailList.push({
					scheduleDateNum: "", // 任务开始的星期几
					scheduleDateTime: "", // 任务开始时间
					completeDateTime: "", // 任务结束的星期几
					completeDateTime: "", // 任务截止时间
				})
			},

			changeFrequency(isEdit = false) {
				that.timeNumList = []
				if (that.form.frequency == "ONCE_WEEK") {
					that.timeNumList = [{
						label: "星期一",
						value: 1
					}, {
						label: "星期二",
						value: 2
					}, {
						label: "星期三",
						value: 3
					}, {
						label: "星期四",
						value: 4
					}, {
						label: "星期五",
						value: 5
					}, {
						label: "星期六",
						value: 6
					}, {
						label: "星期日",
						value: 7
					}]
				} else if (that.form.frequency == "ONCE_DAY" || that.form.frequency == "ONCE_MONTH") {
					for (let i = 1; i <= 31; i++) {
						that.timeNumList.push(i)
					}
				} else if (that.form.frequency == "ONCE_YEAR") {
					for (let i = 1; i <= 31; i++) {
						that.timeNumList.push(i)
					}
					for (let i = 1; i <= 12; i++) {
						that.monthNumList.push(i)
					}
				}
				if (!isEdit) that.form.detailList = that.$options.data().form.detailList
			},

			edit(item) {
				that.ajax({
					url: '/documentEntPlan/getDocumentEntPlanById',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						planId: item.id
					},
					success: async function(result) {

						that.form = result.data
						if (result.data.scheduleType == "WASTE_WATER") {
							that.getWaterOutletList(item.id)
						}

						if (result.data.scheduleType == "WASTE_GAS") {
							that.getGasOutletList(item.id)
						}
						await that.getDocumentScheduleContentCodeList(true)
						that.changeFrequency(true)
						that.visible1 = true
						that.visible2 = false
					},
				})
			},

			onSubmit() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						if (that.form.scheduleType == "WASTE_GAS") {
							let trasformData = that.form.gasOutletList
							if (trasformData && trasformData.length > 0) {
								for (let item1 of that.gasOutletList) {
									item1.isInspect = false
									let thisIndex1 = trasformData.findIndex(item2 => item2[0] == item1.value)
									if (thisIndex1 != -1) item1.isInspect = true

									for (let item3 of item1.detailList) {
										for (let item2 of trasformData) {
											let extraId = item2[1]
											if (item3.value == extraId) item3.isInspect = true
										}
									}
								}
							}
							that.form.gasOutletList = that.gasOutletList

							let newData = []
							for (let item of that.form.gasOutletList) {
								if (item.isInspect) newData.push(item)
							}
							that.form.gasOutletList = newData
						}
						if (that.form.scheduleType == "WASTE_WATER") {
							let trasformData = that.form.waterOutletList
							if (trasformData && trasformData.length > 0) {
								for (let item1 of that.waterOutletList) {
									item1.isInspect = false
									let thisIndex1 = trasformData.findIndex(item2 => item2[0] == item1.value)
									if (thisIndex1 != -1) item1.isInspect = true

									for (let item3 of item1.detailList) {
										for (let item2 of trasformData) {
											let extraId = item2[1]
											if (item3.value == extraId) item3.isInspect = true
										}
									}
								}
							}
							that.form.waterOutletList = that.waterOutletList
						}

						that.ajax({
							url: '/documentEntPlan/saveDocumentEntPlan',
							contentType: 'application/json',
							data: JSON.stringify(that.form),
							success: function(result) {
								if (result.status == 1 && result.data) {
									that.visible1 = false;
									that.visible2 = false;
									if (that.form.id) {
										that.$message({
											message: '修改成功',
											type: 'success'
										});
									} else {
										that.$message({
											message: '保存成功',
											type: 'success'
										});
										that.form = {}
									}
									that.getData()
								} else {
									if (result.infoList && result.infoList.length >
										0) {
										that.$message({
											message: result.infoList[0],
											type: 'error'
										});
									} else {
										that.$message({
											message: '保存信息失败',
											type: 'error'
										});
									}
								}
							},
						})
					}
				})
			},

			reset() {
				this.pageIndex = 1;
				that.countPlanSchedule()
				that.getPlanExecutorList()
				that.getGasOutletList()
				that.getWaterOutletList()
				that.pageEntGroupDataReportList()
				this.getData();
			},

			handleSizeChange: function(val) {
				this.pageIndex = 1;
				this.pageSize = val;
				this.getData();
			},

			handleCurrentChange: function(val) {
				this.pageIndex = val;
				this.getData();
			},

			search() {
				this.pageIndex = 1
				that.getData()
			},

			getData() {
				that.ajax({
					url: '/documentEntPlan/pageDocumentEntPlan?ticketId=' + this.$store.state.token +
						'&pageIndex=' + this.pageIndex + '&pageSize=' + this.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (result) => {
						if (result.status == 1) {
							that.data3 = result.data.records
							that.total = result.data.total
							that.$forceUpdate()
						}
					}
				}, "加载中...");
			},

			getDocumentScheduleContentCodeList(noClear = true) {
				if (!noClear) that.form.contentCode = ''
				return new Promise((resolve, reject) => {
					that.ajax({
						url: '/documentEntSchedule/getDocumentScheduleContentCodeList',
						contentType: 'application/x-www-form-urlencoded',
						data: {
							code: that.form.scheduleType,
							isPlan: 1
						},
						success: function(result) {
							that.dataList2 = result.data
							resolve(result.data)
						}
					})
				})
			},

		}
	}
</script>

<style scoped>
	page {
		background: #F3F3F3;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}

	.selectedClass {
		color: #3b45f4;
		font-weight: bold;
	}
</style>